<template>
  <!--需要导入模块和css
        
        Pagination中间滚动的小圆点
            clickable开启点击切换
        :pagination="{ clickable: true }

        Autoplay是否自动播放自动播放
            autoplay是否自动播放
            delay下一张的间隔
            pauseOnMouseEnter鼠标悬停暂停自动切换
            :autoplay="{ autoplay: true, delay: 3000,pauseOnMouseEnter:true }"
        Navigation:左右的箭头
            navigation
        Scrollbar:最下面的滚动条
            draggables是否可以拖动滚动条
            :scrollbar="{ draggable: true }
        Mousewheel:鼠标滚轮操作轮播图滚动
            mousewheel开启鼠标滚轮滚动
        :mousewheel="{ mousewheel: true }
        Effects：设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
    -->
  <!--
        循环滚动
        loop是否开启循环滚动
        slidesPerview循环滚动的张数默认全部循环
        :loop="{ loop: true, slidesPerview: 'auto' }"
        页面显示数量
        slides-per-view
        两张图片之间的间隔
        space-between
        居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
        centeredSlides
        垂直滚动，默认水平，需要给芙蓉区加一个宽高，否则看不出效果
        :direction="'vertical'"
        grabCursor:该选项给Swiper 使用者提供小小的贴心应用，设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
        :grabCursor="true"
    -->
  <!--横向单张循环滚动-->
  <div>
    <!--:loop="{ loop: true, slidesPerview: 'auto' }"-->
    <swiper
      :modules="modules"
      :mousewheel="{ mousewheel: true }"
      :loop="true"
      :autoplay="{ autoplay: true, delay: 3000, pauseOnMouseEnter: true }"
      :slides-per-view="1"
      :space-between="0"
      navigation
      :pagination="{ clickable: true }"
    >
      <swiper-slide v-for="item in tabImg" :key="item.name">
        <img :src="item.img" style="height: 400px; width: 100%" />
      </swiper-slide>
    </swiper>
  </div>
  <!--横向多张张循环滚动-->
  <div>
    <swiper
      :modules="modules"
      :loop="true"
      :autoplay="{ autoplay: true, pauseOnMouseEnter: true, delay: 3000 }"
      :slides-per-view="3"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <swiper-slide v-for="item in tabImg2" :key="item.name">
        <img :src="item.img" style="height: 300px; width: 100%" />
      </swiper-slide>
    </swiper>
  </div>
  <!--垂直滚动-->
  <div>
    <swiper
      style="width: 100%; height: 600px"
      :mousewheel="{ mousewheel: true }"
      :modules="modules"
      :slides-per-view="1"
      :direction="'vertical'"
      :space-between="50"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <swiper-slide v-for="item in tabImg3" :key="item.name">
        <img :src="item.img" style="height: 600px; width: 100%" />
      </swiper-slide>
    </swiper>
  </div>
  <div>
    <swiper
      :modules="modules"
      :grab-cursor="true"
      :loop="true"
      :autoplay="{ autoplay: true, delay: 3000, pauseOnMouseEnter: true }"
      :slides-per-view="3"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
    >
      <swiper-slide v-for="item in tabImg2" :key="item.name">
        <img :src="item.img" style="height: 300px; width: 100%" />
      </swiper-slide>
    </swiper>
  </div>

  <!-- <div class="swiperbox">
    <swiper
      :slides-per-view="1"
      :space-between="30"
      :loop="true"
      :centered-slides="true"
      :pagination="{ clickable: true }"
      :autoplay="{ delay: 2500, disableOnInteraction: false }"
      :navigation="true"
      :modules="modules"
    >
      <swiper-slide><img :src="requireImg('1.jpg')" alt="" /></swiper-slide>
      <swiper-slide><img :src="requireImg('2.jpg')" alt="" /></swiper-slide>
      <swiper-slide><img :src="requireImg('3.jpg')" alt="" /></swiper-slide>
      <swiper-slide><img :src="requireImg('4.jpg')" alt="" /></swiper-slide>
    </swiper>
  </div> -->
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue"; // swiper 所需组件
import { Autoplay, Navigation, Pagination, A11y } from "swiper"; // 分页器
import "swiper/swiper-bundle.css";

const requireImg = (name) => {
  return new URL("../assets/images/" + name, import.meta.url).href;
};

const tabImg = [
  { label: "User", name: "first", img: "/static/images/1.jpg" },
  { label: "Config", name: "second", img: "/static/images/2.jpg" },
  { label: "Role", name: "third", img: "/static/images/3.jpg" },
  { label: "Task", name: "fourth", img: "/static/images/4.jpg" }
];
const tabImg2 = [
  { label: "User", name: "first", img: "/static/images/1.jpg" },
  { label: "Config", name: "second", img: "/static/images/2.jpg" },
  { label: "Role", name: "third", img: "/static/images/3.jpg" },
  { label: "Role", name: "4", img: "/static/images/3.jpg" },
  { label: "Role", name: "6", img: "/static/images/3.jpg" },
  { label: "Role", name: "7", img: "/static/images/3.jpg" },
  { label: "Role", name: "8", img: "/static/images/3.jpg" },
  { label: "Task", name: "fourth", img: "/static/images/4.jpg" }
];
const tabImg3 = [
  { label: "Role", name: "third", img: "/static/images/3.jpg" },
  { label: "User", name: "first", img: "/static/images/1.jpg" },
  { label: "User", name: "11", img: "/static/images/1.jpg" },
  { label: "User", name: "13", img: "/static/images/1.jpg" },
  { label: "Config", name: "second", img: "/static/images/2.jpg" },
  { label: "Role", name: "4", img: "/static/images/3.jpg" },
  { label: "Role", name: "6", img: "/static/images/3.jpg" },
  { label: "Role", name: "7", img: "/static/images/3.jpg" },
  { label: "Role", name: "8", img: "/static/images/3.jpg" },
  { label: "Task", name: "fourth", img: "/static/images/4.jpg" }
];

const modules = [Autoplay, Pagination, Navigation, A11y];
</script>
